<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>006-相对路径与绝对路径</title>
	</head>
	<body>
		<!-- 相对路径: 从当前项目目录中去引入资源文件, 都属于相对路径, 例如: img.jpg, ./img.jpg, ../img.jpg -->
		<img src="img.jpg" alt="img 1" />
		<img src="./img.jpg" alt="img 2" />
		<img src="../img.jpg" alt="img 3" />

		<!-- 绝对路径, 分为两类: 本地绝对路径, 网络绝对路径 -->
		<img src="E:/path_url/img.jpg" alt="img 4" />
		<img src="http://www.example.com/img.jpg" alt="img 5" />

		<!--
			常见的图片格式：
			.jpg 或 jpeg 主要特点：是一种有损压缩格式（把肉眼不容易观察出来的细节丢弃了）；支持的颜色丰富，占用空间较小，不支持透明背景，不支持动态图。

			.png 主要特点：是一种无损压缩格式，能够更高质量的保存图片；支持的颜色丰富，占用空间略大，支持透明背景，不支持动态图。

			.bmp 主要特点：不进行任何压缩，在最大程度上保留图片更多细节；支持的颜色丰富，保留的细节更多，占用空间极大，不支持透明背景，不支持动态图。

			.gif 主要特点：仅支持256种颜色，色彩呈现不是很完整；支持的颜色较少，支持简单透明背景，支持动态图。

			.webp（未来主流图片格式） 主要特点：谷歌推出的一种格式，专门用来在网页中呈现图片；具备上述几种格式的优点，但目前兼容性不太好。

			base64 编码格式：将图片文件编码成一串字符，只能通过浏览器打开，不占用服务器资源，可直接作为 img 标签的 src 属性值。
		 -->
	</body>
</html>
